<template>
  <div class="box">
    <van-nav-bar title="收货地址-添加" left-text="" left-arrow @click-left="onClickLeft">
      <!-- 使用插槽 -->
      <template #right>
        <img src="../../../../img/分 享.png" alt="" style="width: 70px" />
      </template>
    </van-nav-bar>
    <!-- 可以使用 CellGroup 作为容器 -->
    <div>
      <van-address-edit
        :area-list="areaList"
        show-delete
        show-set-default
        show-search-result
        :search-result="searchResult"
        :area-columns-placeholder="['请选择', '请选择', '请选择']"
        @save="onSave"
        @delete="onDelete"
        @change-detail="onChangeDetail"
      />
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
const onClickLeft = () => history.back()
import { areaList } from '@vant/area-data'
import { showToast } from 'vant'
import { useRouter } from 'vue-router';
const router = useRouter()
const searchResult = ref([])

const onSave = (item) => {
  console.log(item.name); // 姓名
  console.log(item.tel); // 电话
  console.log(item.province) // 省
  console.log(item.city); // 市
  console.log(item.county) // 区
  console.log(item.addressDetail) // 详细地址
  console.log(item.isDefault) // 是否默认地址
  showToast('保存成功')
  localStorage.setItem('address', JSON.stringify(item))
  router.push('/address')
}
const onDelete = () => showToast('delete')

</script>

<style>
.box {
  width: 100%;
  height: 100vh;
}
</style>
